<template>
  <van-popup v-model="showCarTextFlag" @close="handleClose" position="center" class="edit-text-container"
    :overlay-style="{
      background: 'rgba(0, 0, 0, .8)'
    }">
    <div class="edit-text-content">
      <div class="title-content">编辑车牌</div>
      <van-field v-model="text" label="" size="large" label-width="0" placeholder="请输入您的车牌" class="text-field"
        :clearable="true" />
    </div>
    <div class="btn-container">
      <van-button type="default" block style="margin-right: 12px;" @click="handleClose">关闭</van-button>
      <van-button type="info" block color="linear-gradient(to right, #8773f9, #1989fa)"
        @click="handleSaveCarText">确定</van-button>
    </div>
  </van-popup>
</template>

<script>
import pasterListData from '@/assets/utils/paster'
export default {

  data() {
    return {
      active: 0,
      text: '',
      pasterListData: pasterListData,
      showCarTextFlag: true,
      ChineseList: [
        { name: '京', id: 1 },
        { name: '津', id: 2 },
        { name: '冀', id: 3 },
        { name: '晋', id: 4 },
        { name: '蒙', id: 5 },
        { name: '辽', id: 6 },
        { name: '吉', id: 7 },
        { name: '黑', id: 8 },
        { name: '沪', id: 9 },
        { name: '苏', id: 10 },
        { name: '浙', id: 11 },
        { name: '皖', id: 12 },
        { name: '闽', id: 13 },
        { name: '赣', id: 14 },
        { name: '鲁', id: 15 },
        { name: '豫', id: 16 },
        { name: '鄂', id: 17 },
        { name: '湘', id: 18 },
        { name: '粤', id: 19 },
        { name: '桂', id: 20 },
        { name: '琼', id: 21 },
        { name: '渝', id: 22 },
        { name: '川', id: 23 },
        { name: '贵', id: 24 },
        { name: '云', id: 25 },
        { name: '藏', id: 26 },
        { name: '陕', id: 27 },
        { name: '甘', id: 28 },
        { name: '青', id: 29 },
        { name: '宁', id: 30 },
        { name: '新', id: 31 },
        { name: '←', id: 99 },
      ],
      English_Number: [
        { name: '1', id: 28 },
        { name: '2', id: 29 },
        { name: '3', id: 30 },
        { name: '4', id: 31 },
        { name: '5', id: 32 },
        { name: '6', id: 33 },
        { name: '7', id: 34 },
        { name: '8', id: 35 },
        { name: '9', id: 36 },
        { name: '0', id: 37 },
        { name: 'Q', id: 38 },
        { name: 'W', id: 39 },
        { name: 'E', id: 40 },
        { name: 'R', id: 41 },
        { name: 'T', id: 42 },
        { name: 'Y', id: 43 },
        { name: 'U', id: 44 },
        { name: 'I', id: 45 },
        { name: 'O', id: 46 },
        { name: 'P', id: 47 },
        { name: 'A', id: 48 },
        { name: 'S', id: 49 },
        { name: 'D', id: 50 },
        { name: 'F', id: 51 },
        { name: 'G', id: 52 },
        { name: 'H', id: 53 },
        { name: 'J', id: 54 },
        { name: 'K', id: 55 },
        { name: 'L', id: 56 },
        { name: 'Z', id: 57 },
        { name: 'X', id: 58 },
        { name: 'C', id: 59 },
        { name: 'V', id: 60 },
        { name: 'B', id: 61 },
        { name: 'N', id: 62 },
        { name: 'M', id: 63 },
        { name: '←', id: 99 },
      ],
      plate_number: '',   //车牌号
      first: '',
      numArr: [],
    };
  },

  watch: {
    '$store.state.design.currentSelectionType': {
      immediate: true,
      handler(val, oldVal) {
        const footerContainerEl = document.querySelector('#footer-container');
        if (val === 'carText') {
          footerContainerEl.style.zIndex = '999';
          this.showCarTextFlag = !this.showCarTextFlag;
        } else if (oldVal === 'carText') {
          this.showCarTextFlag = false;
        }
      }
    }
  },

  created() {
    console.log('激活activated');
    let carText = localStorage.getItem('carText');
    this.text = carText;
  },

  methods: {

    // 确定变更车牌
    handleSaveCarText() {
      if (this.text) {
        let newText = this.text.toUpperCase();
        this.handAccountCanvas.changeCarText(newText).then(result => {
          this.handleClose();
          this.$toast({
            position: 'center',
            message: '设置成功',
            duration: 3 * 1000
          });

          localStorage.setItem('carText', this.text);

        });
      } else {
        this.$toast({
          position: 'center',
          message: '请输入您的车牌号码',
          duration: 3 * 1000
        });
      }
    },

    // 关闭弹窗
    handleClose() {
      this.showCarTextFlag = false;
      this.$emit('onClose', 'carText');
    },
  }
};
</script>

<style lang="less" scoped>
.background-container {
  height: 68vh;
  width: 100vw;
  padding-bottom: 68px;
  display: flex;
  flex-direction: column;

  .header-content {
    display: flex;
    width: 100vw;
    height: 58px;
    align-items: center;
    position: relative;

    &::before {
      display: block;
      content: '';
      position: absolute;
      bottom: 0;
      width: 200%;
      left: 0;
      border-bottom: 1px solid #eaeaea;
      transform: scale(0.5);
      transform-origin: left bottom;
    }
  }

  .tab-content {
    width: 280px;
  }

  .operation-content {
    display: flex;
    flex: 1;
    padding: 0 8px;
    justify-content: space-around;
    position: relative;

    &::before {
      display: block;
      content: "";
      height: 24px;
      width: 1px;
      background: #eaeaea;
      position: absolute;
      top: 0;
      left: 5px;
      bottom: 0;
      margin: auto;
    }

    .operation-icon {
      width: 20px;
      height: 20px;
      display: block;
    }
  }

  .image-content {
    flex: 1;
    overflow: hidden;
    position: relative;
    padding: 0 12px 0 12px;
    display: flex;
    flex-direction: column;

    .image-item {
      margin-bottom: 12px;
    }

    .img-cover {
      width: 100%;
      background: #eaeaea;
    }
  }
}
</style>

<style lang="less">
.image-content {

  .van-tabs__wrap {
    width: 100%;
    height: 48px;

    .van-tab {
      padding: 0 4px;

      .van-tab__text {
        font-size: 12px;
        background: #eaeaea;
        height: 24px;
        line-height: 24px;
        padding: 0 12px;
        border-radius: 12px;
      }
    }

    .van-tab--active {

      .van-tab__text {
        background: #8da6ef;
        color: #fff;
      }
    }
  }

  .van-tabs__content {
    width: 100%;
    height: calc(100% - 48px);
    overflow-x: hidden;
    overflow-y: auto;
  }
}
</style>
